/**
 * 泛娱区块链 - Home
 * @author: zaric
 * @creation time: 2018-12-07
 */


'use strict';

import React, {Component} from 'react';
import {StyleSheet, Text, TouchableOpacity, TouchableOpacityComponent, View} from 'react-native';
import NavigationBar from '../../component/navigation/NavigationBar';
import SegmentedView from '../../component/segmented/SegmentedView';
import CommonList from '../../component/home/CommonList';
import ServicesApi from '../../config/ServicesApi';
import ImageView from "../../component/common/ImageView";
import {inject, observer} from "mobx-react";

@inject('taskStore')
@observer
export default class Home extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data:
                [
                    {dic_name: '关注', dic_code: StatusCode.DIC_CODE_FOLLOW},
                    {dic_name: '最新', dic_code: StatusCode.DIC_CODE_LATEST},
                    {dic_name: '视频', dic_code: StatusCode.DIC_CODE_VIDEO},
                ],
            index: 0,
            canLoad: false,
        };
    }

    componentDidMount() {
        this.requestDataSources();
        this.requestCatList();
        this.requestTaskInfo();
    }

    requestTaskInfo = async () => {
        const {taskStore} = this.props;

        const result = await taskStore.requestTaskList();
        // console.log('任务信息返回------------>',result);
        //进入首页代表登录成功，保存任务
        const saveRes = await taskStore.saveTask('login');
        // console.log('登录保存任务------------>',saveRes);
    };

    requestCatList = async () => {
        const result = await Services.post(ServicesApi.DICTIONARY_QUERY, {dic_upper: 'subs'});
        // console.log('主页目录返回------------->', result);
        this.setState({canLoad: true});
        if (result.code === StatusCode.SUCCESS_CODE) {
            let temp = this.state.data.slice();
            let catData = temp.concat(result.data);
            // console.log('catData--------->', catData);
            this.setState({data: catData});
        }
    };

    requestDataSources = async () => {
    };

    _onPressMenu = () => {
        RouterHelper.navigate('更多分类', 'Type', {
            callBack: (index) => {
            }
        })
    };

    _onTabChange = (index) => {
        // console.log('index---->', index);
        this.setState({index: index})
    };

    renderSearchView = () => {
        return (
            <TouchableOpacity onPress={() => {
                RouterHelper.navigate('', 'SearchPage');
            }}>
                <View style={styles.searchView}>
                    <ImageView
                        style={styles.searchIcon}
                        source={Images.icon_search_home}
                    />
                    <Text style={styles.searchText}>搜索关键词</Text>
                </View>
            </TouchableOpacity>
        )
    };

    render() {
        const {data, index, canLoad} = this.state;
        return (
            <View
                style={styles.container}
            >
                <NavigationBar
                    renderLeftAction={null}
                    title={this.renderSearchView()}
                />
                {data.length > 0 && canLoad ? (
                    <SegmentedView
                        ref={(v) => this.segmentedRef = v}
                        // onPressMenu={this._onPressMenu}
                        justifyItem={'scrollable'}
                        showSegmentedBar={true}
                        lazy={false}
                        scrollEnabled={true}
                        // showRightMenu={true}
                        indicatorLineWidth={3}
                        indicatorLineColor={Theme.themeColor}
                        indicatorPositionPadding={0}
                        indicatorType={'itemWidth'}
                        autoScroll={true}
                        onChange={this._onTabChange}
                    >
                        {data.map((item, index) => {
                            let uri = '';
                            switch (item.dic_code) {
                                case StatusCode.DIC_CODE_FOLLOW: //关注
                                    uri = ServicesApi.HOME_FOCUS;
                                    break;
                                case StatusCode.DIC_CODE_LATEST: //最新
                                    // uri = ServicesApi.QUERY_TOP;
                                    uri = ServicesApi.NEWEST_LIST;
                                    break;
                                default:
                                    uri = ServicesApi.INFORMATION_QUERY;
                                    break;
                            }
                            return (
                                <View
                                    key={`item_${index}`}
                                    title={item.dic_name}
                                    style={styles.segmentedItem}
                                    titleStyle={styles.titleStyle}
                                    activeTitleStyle={styles.activeTitleStyle}
                                >
                                    <CommonList
                                        uri={uri}
                                        query={{
                                            focus_user: global.secretKey,
                                            article_type: item.dic_code === StatusCode.DIC_CODE_VIDEO ? '2' : null,
                                            subs: item.dic_code === StatusCode.DIC_CODE_VIDEO ? null : item.dic_code,
                                            audit_status: 'through',
                                            last_id: 0,
                                        }}
                                        modify={true}
                                        showDelButton={true}
                                        showTopButton={true}
                                        showStauts={true}
                                        showFilter={false}
                                        showComplete={false}
                                        dic_code={item.dic_code}
                                    />
                                </View>
                            )
                        })}
                    </SegmentedView>) : null}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff'
    },

    textStyle: {},

    segmentedItem: {
        flex: 1,
    },

    titleStyle: {
        fontSize: FontSize(14),
        color: '#4a4a4a'
    },
    activeTitleStyle: {
        fontSize: FontSize(14),
        color: Theme.themeColor
    },
    //搜索框
    searchView: {
        marginTop: 8,
        marginHorizontal: 15,
        borderRadius: 15,
        backgroundColor: "#ececec",
        paddingVertical: 6,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    searchIcon: {
        width: 16,
        height: 16,
    },
    searchText: {
        fontSize: FontSize(13),
        color: "#a0a0a0",
        marginLeft: 5,
    }
});